<template>
  <div style="height:100%;padding: 20px">
    <el-row>

      <!--搜索栏-->
      <div class="search_bar">
        <el-tag style="height: 40px;font-size: 16px;line-height: 40px">系统维护</el-tag>
        <!--查询按钮组-->

          <el-button-group>
              <el-button :type="button1" class="tb_button" @click="button11()">全部</el-button>
            <el-button :type="button2" class="tb_button" @click="button12()">进行中</el-button>
            <el-button :type="button3" class="tb_button" @click="button13()">已完成</el-button>
          </el-button-group>
 
        <!--搜索框-->

          <el-input
            placeholder="请输入"
            type="text"
            v-model="input"
            suffix-icon="el-icon-search"
            class="input_check"
          ></el-input>

      </div>
      <!--添加按钮，跳转录入表单-->
      <!-- <router-link to="Feedback_Add">
        <el-button class="add_button">+添加</el-button>
      </router-link> -->
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :data="searchMan.filter(data => !state || data.state.toLowerCase().includes(state.toLowerCase())).filter(data => !input || data.name.toLowerCase().includes(input.toLowerCase())).slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%;padding: 20px 20px;"
      >
        <el-table-column prop="feedschname" label="学校名称"></el-table-column>
        <el-table-column prop="factmod" label="活动模块"></el-table-column>
        <el-table-column prop="feedbacktime" label="反馈时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="fopinions" label="问题说明"></el-table-column>
        <el-table-column prop="ftechnician" label="技术员"></el-table-column>
        <el-table-column prop="finputtime" label="录入时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="fentryclerk" label="录入员"></el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="details(scope.row)">查看详情</el-button>
            <!-- <el-button type="text" size="small" @click.native.prevent="aaa(scope.row)">改变状态</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!--底部分页-->
      <div class="footer">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10]"
          :page-size="pagesize"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.searchMan.length"
          style="margin-top: 20px;float: right"
        ></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
import { getFeedbacks, updateFeedbacks, removeFeedbacks } from "@/api/Feedback";
export default {
  data() {
    return {
      check: "",
      //表
      search: "",
      currentPage: 1,
      pagesize: 10,
      total: 0,
      dialogFormVisible: false,
      loading: true,
      add: false,
      data: [],
      searchData: [],
      alldata: [],
      input: "",
      list: "",
      state: "",
      button1:"primary",
      button2:"",
      button3:"",
    };
  },
  mounted() {
    this.getdata();
  },
  computed: {
    searchMan() {
      var value = this.input;
      var select = this.value;
      if (value && select) {
        var list = this.list.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key])
              .toLowerCase()
              .match(value);
          });
        });
        return list.filter(item => {
          return item.Maintain === select;
        });
      }
      if (value) {
        return this.list.filter(data => {
          return Object.keys(data).some(key => {
            return String(data[key])
              .toLowerCase()
              .match(value);
          });
        });
      } else if (select) {
        return this.list.filter(item => {
          return item.Maintain === select;
        });
      }
      return this.list;
    }
  },
  methods: {
    // 获取
    getdata() {
      let data = async () => {
        try {
          let result = await getFeedbacks();
          if (result) {
            this.list = result;
            this.loading = false;
          }
        } catch (err) {
          console.log(err);
        }
      };
      data();
    },

    // 更改状态
    // aaa(row) {
    //   this.$confirm("此操作将此任务状态, 是否继续?", "提示", {
    //     confirmButtonText: "确定",
    //     cancelButtonText: "取消",
    //     type: "warning"
    //   })
    //     .then(async () => {
    //       let index = this.list.findIndex(item => {
    //         return item === row;
    //       });
    //       if (this.list[index].state == "进行中") {
    //         this.list[index].state = "已完成";
    //         console.log(this.list[index]);
    //         await updateFeedbacks(this.list[index]);
    //       } else {
    //         this.list[index].state = "进行中";
    //         console.log(this.list[index]);
    //         await updateFeedbacks(this.list[index]);
    //       }

    //       this.$message({
    //         type: "success",
    //         message: "修改成功!"
    //       });
    //     })
    //     .catch(() => {
    //       this.$message({
    //         type: "info",
    //         message: "已取消修改"
    //       });
    //     });
    // },
        button11() {
     this.button1 = 'primary'
     this.button2 = ''
     this.button3 = ''
     this.state = ""
     console.log(this.state)
},
    button12() {
      this.button1 = ''
     this.button2 = 'primary'
     this.button3 = ''
     this.state = "进行中"
     console.log(this.state)
},
    button13() {
     this.button1 = ''
     this.button2 = ''
     this.button3 = 'primary'
     this.state = "已完成"
     console.log(this.state)
},
    tosearch() {
      let search = this.search;
      let searchData = this.data;
      if (search == "") {
        this.$message.error("搜索内容不能为空");
        return;
      }

      var data = searchData.filter(data => {
        return Object.keys(data).some(key => {
          return String(data[key])
            .toLowerCase()
            .match(search);
        });
      });
      this.data = data;
      return data;
    },
    adds() {
      this.dialogFormVisible = true;
      this.form = {};
      this.add = true;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      console.log(this.data);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    handleClick(row) {
      console.log(row);
    },
    details(row) {
      let index = this.list.findIndex(item => {
        return item == row;
      });
      console.log(index);
      this.$router.push({
        path: "/Maintain_2",
        query: {
          index: index
        }
      });
    },
    dateFormat(row, column, cellValue, index) {
      const daterc = row[column.property];
      console.log(daterc);
      if (daterc != null) {
        const dateMat = new Date(daterc);
        const year = dateMat.getFullYear();
        const month = dateMat.getMonth() + 1;
        const day = dateMat.getDate();
        const hh = dateMat.getHours();
        const mm = dateMat.getMinutes();
        const ss = dateMat.getSeconds();
        const timeFormat =
          year + "/" + month + "/" + day + " " + hh + ":" + mm + ":" + ss;
        return timeFormat;
      }
    }
  }
};
</script>

<style>
.input_check {
  width: 250px;
}
.text_position {
  margin: 10px 0 10px 20px;
}
/*分隔符样式*/
.separation {
  
  height: 2px;
  margin: 0 2% 0 2%;
  background-color: gray;
}
.textsty {
  margin-left: 6%;
}
/*查询按钮组样式*/
.search_bar {
  width: 100%;
  display: flex;
  justify-content:space-between;
}
.tb_button {
  width: 80px;
}
.add_button {
  margin-top: 10px;
  width: 98%;
  margin-left: 1%;
}
.footer {
  margin-top: 10px;
  float: right;
}
</style>
